<template>
  <div class="ProvinceCityAreaInterlock">
    <div class="warp">
      <div class="province item">
        <span >省份: </span>
        <el-select v-model="provinceCode" placeholder="请选择" clearable :filter-method="filterProvinceMethod" filterable @change="changeProvince" :no-data-text="noDataText">
          <el-option v-for="item in provinceAll" :key="item.code" :value="item.code" :label="item.name"></el-option>
        </el-select>
      </div>
      <div class="city item">
        <span>城市: </span>
        <el-select v-model="cityCode" placeholder="请选择" clearable :filter-method="filterCityMethod" filterable  @change="changeCity" :no-data-text="noDataText">
          <el-option v-for=" item in cityDataAll" :key="item.code" :value="item.code" :label="item.name"> </el-option>
        </el-select>
      </div>
      <div class="area item">
        <span>地区: </span>
        <el-select v-model="areaCode" placeholder="请选择" clearable :filter-method="filterAreaMethod" filterable :no-data-text="noDataText">
          <el-option v-for=" item in areaAll" :key="item.code" :value="item.code" :label="item.name"> </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import { ElSelect,ElOption } from "element-plus"
import dataAll  from "./pca-code.json"


let noDataText = ref("暂无数据")

interface BaseOption {
  code:string  | number
  name:string 
}

interface DataOption extends  BaseOption {
  children?:DataOption[]
} 
interface returnParentData {
  province:BaseOption,city:BaseOption,area:BaseOption
}

let emits = defineEmits<{
  (e:"change",data:returnParentData):void,
}>()
let props = defineProps({
  province:{
    type:Object,
    default:()=>({})
  },
  city:{
    type:Object,
    default:()=>({})
  },
  area:{
    type:Object,
    default:()=>({})
  }
})



let provinceAll = ref<DataOption[] | []>(dataAll)
let cityDataAll = ref<DataOption[] | []>([])
let areaAll = ref<DataOption[] | []>([])

let  provinceCode = ref<number|string>()
let cityCode = ref<number|string>()
let areaCode = ref<number|string>()
// 接收父组件传递的集合
watch(()=>({province:props.province,city:props.city,area:props.area}),(val)=>{
  provinceCode.value = val['province']?.code   
  cityCode.value = val['city']?.code 
  areaCode.value = val['area']?.code 

},{deep:true,immediate:true})
// 城市
watch(()=>provinceCode.value,(province)=>{
  if(province){
    let city = provinceAll.value.find(p=>p.code == province)?.children || []
    cityDataAll.value = city
  }else {

    cityCode.value = ""
    areaCode.value = ""
    areaAll.value = []
    cityDataAll.value = []
  }
},{deep: true,immediate:true})

// 地区
watch(()=>cityCode.value,(city)=>{
  if(city){
    let area = cityDataAll.value.find(p=>p.code == city)?.children || []
    areaAll.value = area
  }else{
    areaCode.value = ""
    areaAll.value = []
  }
},{deep: true,immediate:true})

// 选中后的数据
watch(()=>[provinceCode.value,cityCode.value,areaCode.value],(val)=>{
  let data = val.filter(item=>Boolean(item))
  if(data.length > 2){

    let province = {
      code: provinceCode.value as string,
      name: provinceAll.value.find(item=>item.code == provinceCode.value)?.name as string
    }
    let city = {
      code:cityCode.value as string,
      name:cityDataAll.value.find(item=>item.code == cityCode.value)?.name as string
    }
    let area = {
      code:areaCode.value as string,
      name:areaAll.value.find(item=>item.code== areaCode.value)?.name as string
    }
    emits("change", {province,city, area})
  }
},{deep: true})

// 搜索
const filterProvinceMethod = (val:string)=>{
  // console.log("val:",val)
  if(val){
    let item = dataAll.filter(pro=>pro.name.indexOf(val) > -1) 
    provinceAll.value = item
  }else{
    provinceAll.value = dataAll
  }
}

const filterCityMethod = (name:string)=>{
  if(name){
    let item = cityDataAll.value?.filter(c=>c.name.indexOf(name) > -1)

    cityDataAll.value = item
  }else {
    cityDataAll.value = provinceAll.value.find(p=>p.code === provinceCode.value)?.children || []
  }
}

const filterAreaMethod = (name:string)=>{
  if(name){
   let item = areaAll.value?.filter(a=>a.name.indexOf(name) > -1)
   areaAll.value = item
  }else {
    areaAll.value = cityDataAll.value.find(a=>a.code == cityCode.value)?.children || []
  }
}

// 修改
const changeProvince = ()=>{
  cityCode.value = ""
  areaCode.value = ""
  cityDataAll.value = []
}
// 
const changeCity = ()=>{
  areaCode.value = ""

}
// 


</script>

<style scoped lang="scss">
.warp{
  .item{display:inline-block;margin: 0 30px}
}
</style>